<script setup>
import CForm from "../packages/form/index.vue";
import CButton from "../packages/button/index.vue";
import CFormItem from "../packages/form-item/index.vue";
import CInput from "../packages/input/index.vue";
import CLayer from "../packages/layer/index.vue";
import {Tips} from "../packages/index.js";
function handleClick(event) {
    console.log(event);
    Tips.warning('登录失败')
}
</script>

<template>
    <div>
        <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo" alt="Vite logo"/>
        </a>
        <a href="https://vuejs.org/" target="_blank">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
        </a>
    </div>
    <c-layer>
        <c-button type="default" size="mini">default</c-button>
        <c-button type="warning">warning</c-button>
        <c-button type="primary">primary</c-button>
        <c-button type="danger">danger</c-button>
        <c-button type="success">success</c-button>
    </c-layer>
    <c-form @submit="handleClick">
        <c-form-item label="账号">
            <c-input placeholder="placeholder"/>
        </c-form-item>
        <c-form-item label="密码">
            <c-input placeholder="placeholder"/>
        </c-form-item>
        <c-button type="danger">submit</c-button>
    </c-form>
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
